<template>
  <div class="dashboard-editor-container">

    <el-page-header @back="goBack" :content="$t('route.view_explodefile_result')">
    </el-page-header>

    <el-row :span="24">
      <el-col :span="24" style="text-align: right;">
        <!--        <el-button type="primary" :key="1" @click="download">-->
        <!--          <i class="el-icon-download"></i>-->
        <!--          {{ $t('v520.downloadResult') }}-->
        <!--        </el-button>-->
      </el-col>
      <el-row :span="24" :gutter="20" style="margin-top: 20px;">
        <el-col :xs="24" :sm="24" :md="8" :lg="8">
          <span style="font-weight: bold;margin-right: 7px;">{{ $t('v520.taskState') }}</span>
          <el-tag v-if="jobInfo.status == 0">{{ $t('v520.waitToRun') }}</el-tag>
          <el-tag v-if="jobInfo.status == 1" type="warning">{{ $t('v520.running') }}</el-tag>
          <el-tag v-if="jobInfo.status == 2" type="success">{{ $t('v520.success') }}</el-tag>
          <el-tag v-if="jobInfo.status == 3" type="danger">{{ $t('v520.Failure') }}</el-tag>
        </el-col>
        <el-col :xs="24" :sm="24" :md="8" :lg="8">
          <b>{{ $t('v520.taskName') }}</b>
          {{ jobInfo.job_name }}
        </el-col>
        <el-col :xs="24" :sm="24" :md="8" :lg="8">
          <b>{{ $t('v520.createTime') }}</b>
          {{ jobInfo.createtime }}
        </el-col>
      </el-row>

    </el-row>

    <el-card class="box-card" :loading="loading" style="margin-top: 20px;">
      <div slot="header" class="clearfix">
        <span>{{ $t('v520.splitResult') }}</span>
        <div style="float: right;display: inline-block;padding-right: 10px;">
          <el-button @click="showReg = true" plain>
            <i class="el-icon-s-promotion"></i>
            {{ $t('explodeFile.createReg') }}
          </el-button>
          &nbsp;&nbsp;
          <el-button type="primary" @click="downloadPkg" plain>
            <i class="el-icon-box"></i>
            {{ $t('explodeFile.downloadPackge') }}
          </el-button>
        </div>
      </div>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        v-loading="loading"
        :element-loading-text="$t('explodeFile.loadfile')"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <el-table-column
          prop="file"
          :label="$t('explodeFile.fileName')"
        >
        </el-table-column>
        <el-table-column
          prop="rows"
          :label="$t('explodeFile.rowNum')"
          width="220"
        >
        </el-table-column>
        <el-table-column
          prop="download"
          :label="$t('explodeFile.fileStatus')"
          width="200"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.download==0" type="info">{{ $t('explodeFile.ndownload') }}</el-tag>
            <el-tag v-if="scope.row.download==1" type="success">{{ $t('explodeFile.downloaded') }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="download_time"
          :label="$t('explodeFile.downloadTime')"
          width="180"
        >
        </el-table-column>
        <el-table-column
          fixed="right"
          :label="$t('v520.operate')"
          width="130"
        >
          <template slot-scope="scope">
            <el-button @click="download(scope.row)" type="primary" size="small" round>
              <i class="el-icon-download"></i>
              {{ $t('explodeFile.download') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog
      :title="this.$t('explodeFile.importFileSesele')"
      :visible.sync="showReg"
      :width="dialogWidth"
      top="10vh"
    >
      <el-transfer
        :props="{key: 'file',label: 'file'}"
        :titles="[this.$t('regTask.sourceFile'), this.$t('explodeFile.toAnalysis')]"
        v-model="regFiles"
        :render-content="renderFunc"
        :data="tableData"
      ></el-transfer>
      <el-button style="margin-top: 20px;" @click="createReg" type="primary">{{ $t('explodeFile.importTo') }}</el-button>
    </el-dialog>

  </div>
</template>

<script>
require('echarts/theme/macarons')
import { info } from '@/api/jobs'

export default {
  name: 'explodefileViewResult',
  created() {
    this.id = this.$route.params.id
    if (!this.$route.params.id || this.$route.params.id == 0 || this.$route.params.id == undefined) {
      this.$notify.error({ title: '请求失败', message: '任务id为无效id' })
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.go(-1)
    }
    // _this.loading = this.$loading({
    //   lock: true,
    //   text: 'Loading',
    //   spinner: 'el-icon-loading',
    //   background: 'rgba(0, 0, 0, 0.7)'
    // });
  },
  data() {
    return {
      id: 0,
      labels: [],
      loading: true,
      tableData: [],
      jobInfo: {
        job_result: {
          fileList: []
        },
        packgeUrl: ''
      },
      dialogWidth: '800px',
      showReg: false,
      regFiles: []
    }
  },
  mounted() {
    // let _this = this
    // this.$nextTick(() => {
    //   // _this.getChart()
    //   _this.loading = false
    // })
    this.loading = true
    info({ id: this.id }).then(res => {
      this.jobInfo = res.data
      this.tableData = res.data.job_result.fileList
      this.loading = false
    })
  },
  methods: {
    setDialogWidth() {
      var val = document.body.clientWidth
      const def = 600
      if (val < def) {
        this.dialogWidth = '100%'
      } else {
        this.dialogWidth = '50%'
      }
    },
    goBack() {
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.go(-1)
    },
    download(row) {
      if (!row.download_url || row.download_url == '' || row.download_url == undefined) {
        this.$notify.error({
          title: this.$t('v520.downloadFail'),
          message: '暂无结果可以下载'
        })
        return
      }

      var win = window.open()
      win.location.href = row.download_url + '?task_id=' + this.id
    },
    downloadPkg() {
      if (this.jobInfo.packgeUrl == '' || this.tableData == [] || this.tableData == null || this.tableData == undefined) {
        this.$notify.error({
          title: this.$t('v520.downloadFail'),
          message: '暂无结果可以下载'
        })
        return
      }
      var win = window.open()
      win.location.href = this.jobInfo.packgeUrl
    },
    renderFunc(h, option) {
      var showName = option.file
      var start = showName.indexOf('(')
      var end = showName.indexOf(')')
      if (start != -1 && end != -1) {
        showName = showName.substring(start+1, end)
      }
      showName = showName + '(Rows:' + option.rows + ')'
      return <span title={showName}>{showName}</span>
    },
    createReg() {
      localStorage.setItem('alertRegFiles',JSON.stringify(this.regFiles));
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.push({ path: '/regphone/create' })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  background-color: #FFF;
  min-height: 100vh;
  padding: 10px 20px 0px;

  .pan-info-roles {
    font-size: 12px;
    font-weight: 700;
    color: #333;
    display: block;
  }

  .info-container {
    position: relative;
    margin-left: 190px;
    height: 150px;
    line-height: 200px;

    .display_name {
      font-size: 48px;
      line-height: 48px;
      color: #212121;
      position: absolute;
      top: 25px;
    }
  }
}
</style>
